<%--
  Created by IntelliJ IDEA.
  User: dab
  Date: 2025/7/13
  Time: 07:40
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>项目介绍</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
        }

        body {
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            background: #f8faf6;
            color: #2e7d32;
            padding: 40px 20px;
        }

        /* 动态背景 */
        .bg {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle at 50% 50%, #81c784 0%, transparent 70%),
            radial-gradient(circle at 20% 20%, #a5d6a7 0%, transparent 50%),
            radial-gradient(circle at 80% 80%, #4caf50 0%, transparent 60%);
            background-size: 200% 200%;
            animation: bgMove 20s ease infinite;
            opacity: 0.2;
            z-index: -1;
        }

        @keyframes bgMove {
            0%, 100% { background-position: 0% 0%; }
            25% { background-position: 100% 0%; }
            50% { background-position: 100% 100%; }
            75% { background-position: 0% 100%; }
        }

        /* 内容卡片 */
        .content-card {
            background: rgba(241, 250, 238, 0.8);
            backdrop-filter: blur(10px);
            border-radius: 16px;
            box-shadow: 0 10px 30px rgba(76, 175, 80, 0.1);
            border: 1px solid rgba(76, 175, 80, 0.1);
            padding: 40px;
            max-width: 800px;
            width: 100%;
            margin-top: 20px;
            transition: all 0.3s ease;
        }

        .content-card:hover {
            box-shadow: 0 15px 35px rgba(76, 175, 80, 0.2);
        }

        /* 标题样式 */
        h2 {
            font-size: 24px;
            font-weight: 600;
            margin-bottom: 15px;
            margin-top: 30px;
            color: #1b5e20;
            position: relative;
        }

        h2::before {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 0;
            width: 50px;
            height: 3px;
            background-color: #4caf50;
            border-radius: 3px;
        }

        /* 段落样式 */
        p {
            font-size: 16px;
            line-height: 1.8;
            margin-bottom: 20px;
            color: #334155;
        }

        /* 列表样式 */
        ul {
            list-style-type: none;
            padding: 0;
            margin-bottom: 20px;
        }

        ul li {
            margin-bottom: 10px;
            position: relative;
            padding-left: 25px;
            color: #334155;
        }

        ul li::before {
            content: '•';
            position: absolute;
            left: 0;
            color: #4caf50;
            font-size: 20px;
            line-height: 1;
        }

        /* 联系信息样式 */
        .contact {
            margin-top: 30px;
        }

        .contact a {
            color: #2e7d32;
            text-decoration: none;
            font-weight: 500;
            transition: color 0.3s ease;
        }

        .contact a:hover {
            color: #1b5e20;
            text-decoration: underline;
        }

        /* 页面标题 */
        .page-title {
            font-size: 32px;
            font-weight: 700;
            margin-bottom: 30px;
            color: #1b5e20;
            text-align: center;
            position: relative;
        }

        .page-title::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 4px;
            background-color: #4caf50;
            border-radius: 4px;
        }

        /* 粒子效果 */
        .particles {
            position: fixed;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: -1;
        }

        .particle {
            position: absolute;
            border-radius: 50%;
            opacity: 0;
            animation: float 8s ease-in-out infinite;
        }

        @keyframes float {
            0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0; }
            10%, 90% { opacity: 0.5; }
            50% { transform: translateY(-100px) rotate(180deg); opacity: 0.5; }
        }
    </style>
    <script>
        // 创建动态背景粒子
        function createParticles() {
            const particles = document.querySelector('.particles');
            const colors = ['#81c784', '#a5d6a7', '#c8e6c9', '#4caf50', '#66bb6a', '#9ccc65'];

            for (let i = 0; i < 30; i++) {
                const particle = document.createElement('div');
                particle.classList.add('particle');

                // 随机大小、位置、颜色和动画延迟
                const size = Math.random() * 6 + 2;
                const x = Math.random() * 100;
                const y = Math.random() * 100;
                const color = colors[Math.floor(Math.random() * colors.length)];
                const delay = Math.random() * 10;
                const duration = Math.random() * 15 + 10;

                particle.style.width = `${size}px`;
                particle.style.height = `${size}px`;
                particle.style.backgroundColor = color;
                particle.style.left = `${x}vw`;
                particle.style.top = `${y}vh`;
                particle.style.animationDelay = `${delay}s`;
                particle.style.animationDuration = `${duration}s`;

                particles.appendChild(particle);
            }
        }

        // 页面加载完成后创建粒子
        window.addEventListener('load', createParticles);
    </script>
</head>
<body>
<div class="bg"></div>
<div class="particles"></div>

<div class="page-title">智慧农业技术体系项目</div>

<div class="content-card">
    <h2>项目概述</h2>
    <p>
        该项目联合中国科学院大学、东北农业大学、黑龙江八一农垦大学、哈尔滨信息工程学院，结合计算机、大数据、农业、化学、生态等专业共同推动项目进展。项目致力于将现代信息技术与传统农业深度融合，打造智慧农业综合管理平台，实现农业生产的精准化、智能化和可持续发展。
    </p>

    <h2>团队成员</h2>
    <ul>
        <li>李博 - 项目负责人</li>
        <li>马紫涛 - 技术开发</li>
        <li>苏悦 - 数据分析</li>
        <li>李绍凡 - 系统测试</li>
    </ul>

    <h2>指导教师</h2>
    <ul>
        <li>软件学院 - 满国晶老师</li>
        <li>创新创业学院 - 张玉凤老师</li>
    </ul>

    <div class="contact">
        <h2>联系我们</h2>
        <p>邮箱：<a href="mailto:1470057841@qq.com">1470057841@qq.com</a></p>
    </div>
</div>
</body>
</html>